<load target="js/editor_module_config.js" usecdn="true" />
<div class="x_page-header">
	<h1>{$lang->editor} <a class="x_icon-question-sign" href="./admin/help/index.html#UMAN_advanced_editor" target="_blank">{$lang->help}</a></h1>
</div>
<div cond="$XE_VALIDATOR_MESSAGE && $XE_VALIDATOR_ID == 'modules/editor/tpl/admin_index/1'" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
	<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<!-- Editor Preview -->
<section class="section">
	<h1>{$lang->editor_now}</h1>
	<div class="x_tabbable _preview">
		<ul class="x_nav x_nav-tabs" style="margin-bottom:0;border-bottom:0">
			<li class="x_active"><a href="#pre_document">{$lang->main_editor}</a></li>
			<li><a href="#pre_comment">{$lang->comment_editor}</a></li>
		</ul>
		<div class="x_tab-content x_thumbnail">
			<div class="x_tab-pane x_active" id="pre_document">
				<iframe src="{getUrl('','act', 'dispEditorConfigPreview','mode','main')}" id="pre_document_frame" frameborder="0" style="border:0"></iframe>
			</div>
			<div class="x_tab-pane" id="pre_comment">
				<iframe src="{getUrl('','act', 'dispEditorConfigPreview','mode','comment')}" id="pre_comment_frame" frameborder="0" style="border:0"></iframe> 
			</div>
		</div>
	</div>
</section>

<!-- Editor Option -->
<section class="section">
	<h1>{$lang->editor_option}</h1>
	<form action="./" method="post" ruleset="generalConfig" class="x_form-horizontal">
		<input type="hidden" name="module" value="editor" />
		<input type="hidden" name="act" value="procEditorAdminGeneralConfig" />
		<input type="hidden" name="xe_validator_id" value="modules/editor/tpl/admin_index/1" />

		<div class="x_control-group">
			<label for="change_lang_type" class="x_control-label">{$lang->guide_choose_main_editor}</label>
			<div class="x_controls">
				<!--@foreach($editor_skin_list as $editor)-->
				<label class="x_inline" id="label_doc_{$editor}">
					<input type="radio" name="editor_skin" value="{$editor}" id="doc_{$editor}" onClick="getEditorSkinColorList(this.value, null, 'document','label_doc_{$editor}')" checked="checked"|cond="$editor==$editor_config->editor_skin" /> {$editor}
				</label>
				<label class="x_inline">
					<select name="sel_editor_colorset" style="display:none"|cond="$editor!=$editor_config->editor_skin">
						<option value="{$val->name}" selected="selected"|cond="$editor_config->sel_editor_colorset == $val->name" cond="$editor==$editor_config->editor_skin" loop="$editor_colorset_list=>$key,$val">{$val->title}</option>
					</select>
				</label>
				<br />
				<!--@end-->
			</div>
		</div>
		<div class="x_control-group">
			<label for="editor_height" class="x_control-label">{$lang->guide_set_height_main_editor}</label>
			<div class="x_controls">
				<input type="number" name="editor_height" id="editor_height" value="{$editor_config->editor_height}"|cond="$editor_config->editor_height" value="{$editor_config_default['editor_height']}"|cond="!$editor_config->editor_height" /> px
			</div>
		</div>
		<div class="x_control-group">
			<label for="sel_comment_editor_colorset" class="x_control-label">{$lang->guide_choose_comment_editor}</label>
			<div class="x_controls">
				<!--@foreach($editor_skin_list as $editor)-->
				<label class="x_inline" id="label_com_{$editor}">
					<input type="radio" name="comment_editor_skin" value="{$editor}" id="com_{$editor}"  onclick="getEditorSkinColorList(this.value, null, 'reply','label_com_{$editor}')" checked="checked"|cond="$editor == $editor_config->comment_editor_skin" /> {$editor}
				</label>
				<label class="x_inline">
					<select name="sel_comment_editor_colorset" style="display:none"|cond="$editor!=$editor_config->comment_editor_skin">
						<option value="{$val->name}" selected="selected"|cond="$editor_config->sel_comment_editor_colorset == $val->name" cond="$editor==$editor_config->comment_editor_skin" loop="$editor_colorset_list=>$key,$val">{$val->title}</option>
					</select>
				</label>
				<br />
				<!--@end-->
			</div>
		</div>

		<div class="x_control-group">
			<label for="comment_editor_height" class="x_control-label">{$lang->guide_set_height_comment_editor}</label>
			<div class="x_controls">
				<input type="number" name="comment_editor_height"id="comment_editor_height" value="{$editor_config->comment_editor_height}"|cond="$editor_config->comment_editor_height" value="{$editor_config_default['comment_editor_height']}"|cond="!$editor_config->comment_editor_height" /> px
			</div>
		</div>
		<div class="x_control-group">
			<label class="x_control-label">{$lang->guide_choose_text_formatting}</label>
			<div class="x_controls">
					<!--@foreach($content_style_list as $key => $val)-->
					<label class="x_inline">
						<input type="radio" name="content_style" value="{$key}" id="style_{$key}" checked="checked"|cond="$key==$editor_config->content_style||!$editor_config->content_style && $key=='default'"> {$val->title}
					</label>
					<!--@end-->
			</div>
		</div>
		<div class="x_control-group">
			<label class="x_control-label">{$lang->guide_choose_font_body}</label>
			<div class="x_controls">
				{@ 
					if($editor_config->content_font_size) $fontSize = str_replace('px','',$editor_config->content_font_size);
					else $fontSize = str_replace('px','',$editor_config_default['content_font_size']);
				}
				<div style="margin-right:14px">
					<textarea rows="4" cols="42" class="fontPreview" style="font-family:{$editor_config->content_font};font-size:{$fontSize}px;width:100%" title="Font Preview">{$lang->font_preview}</textarea>
				</div>
				<label style="font-family:''" class="fontSelector">
					<input type="radio" name="content_font" id="font_noFont" value="" checked="checked"|cond="!$editor_config->content_font && $editor_config->font_defined!= 'Y'" />none(inherit)
				</label>
				<label style="font-family:{$detail}" class="fontSelector" loop="$lang->edit->fontlist=>$name,$detail">
					<input type="radio" name="content_font" id="font_{$name}" value="{$detail}" checked="checked"|cond="stripcslashes($editor_config->content_font)==$detail && $editor_config->font_defined!= 'Y'" />{$detail}
				</label>
				<label>
					<input type="radio" name="font_defined" id="font_defined" value="Y" checked="checked"|cond="$editor_config->font_defined== 'Y'" />{$lang->by_you} : 
					<input type="text" name="content_font_defined" value="{stripcslashes($editor_config->content_font)}"|cond="$editor_config->font_defined == 'Y'" />
				</label>
				<label>
			</div>
		</div>
		<div class="x_control-group">
			<label class="x_control-label" for="fontSize">{$lang->guide_choose_font_size_body}</label>
			<div class="x_controls">
				<input type="number" id="fontSize" name="content_font_size" value="{$fontSize}" /> px
			</div>
		</div>
		<div class="x_clearfix btnArea">
			<div class="x_pull-right">
				<button type="submit" class="x_btn x_btn-primary">{$lang->cmd_save}</button>
			</div>
		</div>
	</form>
</section>
<!-- Editor Preview -->
<section class="section">
	<h1>{$lang->editor_component}</h1>
	<form action="./" method="post" ruleset="componentOrderAndUse">
		<input type="hidden" name="module" value="editor" />
		<input type="hidden" name="act" value="procEditorAdminCheckUseListOrder" />
		<input type="hidden" name="xe_validator_id" value="modules/editor/tpl/admin_index/1" />
		<table class="x_table x_table-striped x_table-hover sortable">
			<caption><strong>{$lang->total_count}({$component_count})</strong></caption>
			<thead>
				<tr>
					<th class="nowr">{$lang->cmd_move}</th>
					<th>{$lang->component_name}</th>
					<th class="nowr">{$lang->version}</th>
					<th class="nowr">{$lang->author}</th>
					<th class="nowr">{$lang->path}</th>
					<th class="nowr">{$lang->use}</th>
					<th class="nowr">{$lang->cmd_delete}</th>
				</tr>
			</thead>
			<tbody class="uDrag">
				<!--@foreach($component_list as $component_name => $xml_info)-->
				<tr>
					<td><div class="wrap" style="height:70px"><button type="button" class="dragBtn">Move to</button></div></td>
					<td class="title">
						<input type="hidden" name="component_names[]" value="{$xml_info->component_name}" />
						<p><b><a href="{getUrl('', 'module', 'admin', 'act', 'dispEditorAdminSetupComponent', 'component_name', $xml_info->component_name)}">{$xml_info->title}</a></b></p>
						<p>{nl2br($xml_info->description)}</p>
						<!--@if($xml_info->version && $xml_info->need_update == 'Y')-->
						<p class="update">{$lang->msg_avail_easy_update}<a href="{getUrl('act','dispAutoinstallAdminInstall','package_srl',$xml_info->package_srl)}">{$lang->msg_do_you_like_update}</a></p>
						<!--@end-->
					</td>
					<td>{$xml_info->version}</td>
					<td class="nowr">
						<a href="{$author->homepage}" target="_blank" loop="$xml_info->author => $author">{$author->name}</a>
					</td>
					<td>{$xml_info->path}</td>
					<td><input type="checkbox" name="enables[]" id="enable" value="{$xml_info->component_name}" title="Use this component " <!--@if($xml_info->enabled=='Y')--> checked="checked"<!--@end--> /></td>
					<td>
						<!--@if($xml_info->version && $xml_info->delete_url)-->
						<a href="{$xml_info->delete_url}">{$lang->cmd_delete}</a>
						<!--@end-->
					</td>
				</tr>
				<!--@end-->
			</tbody>
		</table>
		<div class="x_clearfix">
			<div class="x_pull-right">
				<button type="submit" class="x_btn x_btn-primary">{$lang->cmd_save}</button>
			</div>
		</div>
	</form>
</section>
<script>
jQuery(function($){
// Editor Preview
	function preview(){
		$('._preview iframe').css({
			width	: "100%",
			height	: "450px"
		});
	}
	preview();
	$('._preview li>a').click(preview);
	
//init
	var fontPreview = $('.fontPreview');
	var fontSelector = $('.fontSelector');
	var checkedFont = fontSelector.filter(':checked').css('fontFamily');
	var changedSize = $('#fontSize').val();

//change event
	fontSelector.change(function(){
		var myFont = $(this).css('fontFamily');
		fontPreview.css('fontFamily',myFont);
	});
	$('#fontSize').keyup(function(){
		var mySize = $(this).val();
		fontPreview.css('fontSize',mySize+'px');
	}).change(function(){$(this).keyup()});

	$('input[name=font_defined]').click(function(){
		$('input[name=content_font]').removeAttr('checked');
	});
	$('input[name=content_font]').click(function(){
		$('input[name=font_defined]').removeAttr('checked');
	});
});
</script>

